<script lang="ts" setup>import { ref } from 'vue'
import LogoLink from "@/components/LogoLink.vue";
import Homepage_Top_RegisterButton from "@/components/Homepage-Top-RegisterButton.vue";
import Homepage_Top_LoginButton from "@/components/Homepage-Top-LoginButton.vue";
import { useRouter } from 'vue-router'
import { onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import AuthManager from '@/utils/auth'

const router = useRouter()


// 登录状态检查
onBeforeMount(async () => {
  try {
    // 尝试获取用户信息来验证登录状态
    const isLoggedIn = await AuthManager.checkLoginStatus()
    if (!isLoggedIn) {
      ElMessage.error('请先登录账号')
      router.push('/Login')
    }
  } catch (error) {
    // 如果获取用户信息失败，说明未登录
    ElMessage.error('请先登录账号')
    router.push('/Login')
  }
})

//查询条件
const inputGoodsName = ref('')
const inputBuildingName = ref('')
const inputSellerName = ref('')
const startDate = ref('')
const endDate = ref('')
// 跟踪当前激活的菜单项
const activeIndex = ref('/Main/goodsList/All');
// 处理菜单项点击事件
const handleSelect = (index) => {
  activeIndex.value = index;
  router.push(index)
};
</script>

<template>
  <!-- 最外层容器 -->
  <el-container class="body">


    <!-- 左侧内容 -->
    <el-container class="left">
    <el-aside>
      <!-- 顶部Logo -->
      <div class="logo">
        <LogoLink/>
      </div>
      <!-- 下拉菜单 -->
      <el-menu @select="handleSelect" :default-active="activeIndex">
        <!-- 下拉菜单1（用户中心） -->
        <el-sub-menu index="/Main/userCenter">
          <template #title>
            <i class="title"></i>
            <el-icon><House /></el-icon>
            <span>用户中心</span>
          </template>
          <el-menu-item index="/Main/userCenter/myAccount">
            <i class="userCenterMyAccount"></i>
            <el-icon><User /></el-icon>
            <span>我的账号</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myShoppingCart">
            <i class="userCenterMyShoppingCart"></i>
            <el-icon><ShoppingCartFull /></el-icon>
            <span>购物车</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myOrder">
            <i class="userCenterMyOrder"></i>
            <el-icon><SoldOut /></el-icon>
            <span>订单</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myConsignment">
            <el-icon><Sell /></el-icon>
            <span>寄售</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myMessage">
            <i class="userCenterMyMessage"></i>
            <el-icon><ChatDotSquare /></el-icon>
            <span>消息</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myComplaint">
            <i class="userCenterMyComplaint"></i>
            <el-icon><Bell /></el-icon>
            <span>投诉</span>
          </el-menu-item>
          <el-menu-item index="/Main/userCenter/myBlackList">
            <i class="userCenterMyBlackList"></i>
            <el-icon><Hide /></el-icon>
            <span>黑名单</span>
          </el-menu-item>

        </el-sub-menu>
        <!-- 下拉菜单2（商品列表） -->
        <el-sub-menu index="/Main/goodsList">
          <template #title>
            <i class="title"></i>
            <el-icon><Goods /></el-icon>
            <span>商品列表</span>
          </template>
          <el-menu-item index="/Main/goodsList/All">
            <i class="goodsListAll"></i>
            <el-icon><Suitcase /></el-icon>
            <span>全部</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Commodity">
            <i class="goodsListCommodity"></i>
            <el-icon><ToiletPaper /></el-icon>
            <span>日用类</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Food">
            <i class="goodsListFood"></i>
            <el-icon><Chicken /></el-icon>
            <span>食品类</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Electronics">
            <i class="goodsListElectronics"></i>
            <el-icon><Cpu /></el-icon>
            <span>电子类</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Clothing">
            <i class="goodsListClothing"></i>
            <el-icon><Medal /></el-icon>
            <span>服饰类</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Beauty">
            <i class="goodsListBeauty"></i>
            <el-icon><MagicStick /></el-icon>
            <span>美妆类</span>
          </el-menu-item>
          <el-menu-item index="/Main/goodsList/Others">
            <i class="goodsListOthers"></i>
            <el-icon><Box /></el-icon>
            <span>其他类</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 下拉菜单3（收藏夹） -->
        <el-sub-menu index="/Main/myFavorites">
          <template #title>
            <i class="title"></i>
            <el-icon><Star /></el-icon>
            <span>收藏夹</span>
          </template>
          <el-menu-item index="/Main/myFavorites/MyFavoritesAll">
            <i class="myFavoritesAll"></i>
            <el-icon><Suitcase /></el-icon>
            <span>全部</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesCommodity">
            <i class="myFavoritesCommodity"></i>
            <el-icon><ToiletPaper /></el-icon>
            <span>日用类</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesFood">
            <i class="myFavoritesFood"></i>
            <el-icon><Chicken /></el-icon>
            <span>食品类</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesElectronics">
            <i class="myFavoritesElectronics"></i>
            <el-icon><Cpu /></el-icon>
            <span>电子类</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesClothing">
            <i class="myFavoritesClothing"></i>
            <el-icon><Medal /></el-icon>
            <span>服饰类</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesBeauty">
            <i class="myFavoritesBeauty"></i>
            <el-icon><MagicStick /></el-icon>
            <span>美妆类</span>
          </el-menu-item>
          <el-menu-item index="/Main/myFavorites/MyFavoritesOthers">
            <i class="myFavoritesOthers"></i>
            <el-icon><Box /></el-icon>
            <span>其他类</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 下拉菜单4（建议收集） -->
        <el-sub-menu index="/userSuggestion">
          <template #title>
            <i class="title"></i>
            <el-icon><Position /></el-icon>
            <span>建议收集</span>
          </template>
          <el-menu-item index="/userSuggestion/mySuggestion">
            <i class="userSuggestionMySuggestion"></i>
            <el-icon><Position /></el-icon>
            <span>提点建议</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 下拉菜单5（用户需知） -->
        <el-sub-menu index="/userNotice">
          <template #title>
            <i class="title"></i>
            <el-icon><Warning /></el-icon>
            <span>用户需知</span>
          </template>
          <el-menu-item index="/userNotice/myNotice">
            <i class="userNoticeMyNotice"></i>
            <el-icon><Warning /></el-icon>
            <span>用户需知</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    </el-container>


    <!-- 右侧内容 -->
    <el-container class="right">
      <!-- 右侧主体 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>

</template>

<style scoped>
/* 左侧容器样式 */
:deep(.body){
  padding: 0px;
  margin: 0px;
}
.el-container.left {
  width: 25%;
  height: 1500px;
}
/* 右侧容器样式 */
.el-container.right {
  width: 100%;
  height: 1500px;
}
/* 侧边栏主样式 */
.el-aside {
  width: 100%;
  height: 100%;
  background-color: #212529;
  --el-menu-text-color: #c2c7d0;
  padding: 10px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}
/* 侧边栏logo */
.logo {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* 侧边栏下拉菜单 样式 */
.el-menu {
  width: 95%;
  --el-menu-bg-color: rgba(0, 0, 0, 0);
  border-right: none;
  margin: 0 auto;
}
/* 菜单标题样式 */
:deep(.el-sub-menu__title) {
  height: 60px;
  font-size: 19px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
/* 菜单子项样式 */
.el-menu-item {
  height: 50px;
  font-size: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
/* 菜单标题的悬浮样式 */
:deep(.el-sub-menu__title:hover){
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}
/* 子菜单项悬停样式 */
.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}
/* 子菜单项的选中样式 */
.el-menu-item.is-active {
  background-color: #D81B60 !important;
  color: white !important;
}
/* 已选中的子菜单项悬停样式 */
.el-menu-item.is-active:hover {
  background-color: #D81B60 !important;
  color: white !important;
}
/* 右侧顶部 */
.Top {
  background-color: #17A2B8;
  width: 100%;
  height: 70px;
  display: flex;
  padding-left: 10px;
  align-items: center;
}
.el-input{
  height: 40px;
  width: 300px;
  padding-left: 10px;
}
.el-button{
  height: 40px;
  width: 70px;
}
</style>

